<template>
  <el-card
    class="form-container"
    shadow="never"
  >
    <el-form
      :model="listQuery"
      :rules="rules"
      ref="listForm"
      label-width="150px"
      size="small"
    >
      <el-form-item
        label="类型："
        prop="sourceType"
      >
        <el-select
          v-model="listQuery.sourceType"
          placeholder="请选择"
          class="input-width"
        >
          <el-option
            v-for="item in contType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="ID："
        :rules="[
          { required: true, message: 'id不能为空', trigger: 'blur'}
        ]"
      >
        <el-input
          v-model="listQuery.sourceId "
          class="input-width"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="图片："
        prop="bannerImage"
      >
        <single-upload v-model="listQuery.bannerImage"></single-upload>
      </el-form-item>
      <el-form-item
        label="生效时间："
        class="input-width"
        prop="daterange"
      >
        <el-date-picker
          v-model="listQuery.daterange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="dateRangeChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="标题：">
        <el-input
          v-model="listQuery.bannerName"
          placeholder="请输入"
          class="input-width"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit('listForm')"
        >提交</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import SingleUpload from '@/components/Upload/singleUpload'
import { saveUpdate, selectById } from '@/api/banner'
import moment from 'moment'

const defaultListQuery = {
  id: '',
  sourceId: '',
  sourceType: '',
  channel: null,
  position: null,
  bannerName: '',
  bannerImage: '',
  daterange: [moment(), moment('2099-12-31')],
  startTime: moment().format(),
  endTime: moment('2099-12-31').format()
}

export default {
  name: 'RelectiveDetail',
  components: { SingleUpload },
  data () {
    return {
      contType: [
        {
          label: '内容发布',
          value: '03'
        },
        {
          label: '课程',
          value: '01'
        },
        {
          label: '服务',
          value: '02'
        }
      ],
      listQuery: {},
      loading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      rules: {
        sourceType: [{ required: true, message: '请输入', trigger: 'blur' }],
        bannerImage: [
          { required: true, message: '请选择图片', trigger: 'blur' }
        ],
        daterange: [
          { required: true, message: '请选择生效时间', trigger: 'blur' }
        ],
        bannerName: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.listQuery = Object.assign({}, defaultListQuery)
    this.getList()
  },
  methods: {
    getList () {
      const params = {
        id: this.$route.query.id
      }
      selectById(params).then((response) => {
        this.listQuery = {
          ...response.data,
          daterange: [
            moment(response.data.startTime),
            moment(response.data.endTime)
          ]
        }
      })
    },
    dateRangeChange (e) {
      this.listQuery.startTime = moment(e[0]).format()
      this.listQuery.endTime = moment(e[1]).format()
    },
    onSubmit (formName) {
      (this.listQuery.id = this.$route.query.id),
      (this.listQuery.channel = this.$route.query.channel),
      (this.listQuery.position = this.$route.query.position)
      console.log(this.listQuery)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            saveUpdate(this.listQuery).then((response) => {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              console.log(response.data)
              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error'
          })
          console.log(response.data)

          return false
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.input-width {
  width: 70%;
}
</style>
